<template>
	<view class="landing">
		<image :src="getImgSrc('/uploads/20231221/17031289166583af542c35dm7QFrkTQpD10a66a8966959e466a225e0bb1f8516894.jpg')" mode="widthFix" class="landing1"></image>
		<image :src="getImgSrc('/uploads/20231221/17031289166583af54238a8RrqGrtpXg1xod3bbc6e55d88a324ce0582b20975881f.jpg')" mode="widthFix" class="landing2"></image>
		<view class="landingTitle">
			留言<text>免费领取</text>《FA解决方案》
		</view>
		<view class="landingBtn" @click='scroll'>
			立即领取千元券&FA选型报价大礼包
		</view>
		<view class="landingHeight" style="height: 60rpx;">

		</view>
		<view class="landingBox">
			<view class="title">
				信息登记
			</view>
			<view class="subTitle">
				姓名
			</view>
			<input type="text" class="inputBox" placeholder="请输入姓名" placeholder-style='font-size: 28rpx;color: #999999;'
				v-model="user.name" />
			<view class="subTitle">
				手机
			</view>
			<input type="tel" class="inputBox" placeholder="请输入手机号码"
				placeholder-style='font-size: 28rpx;color: #999999;' v-model="user.phone" />
			<view class="subTitle">
				公司名称
			</view>
			<input type="text" class="inputBox" placeholder="请输入公司名称"
				placeholder-style='font-size: 28rpx;color: #999999;' v-model="user.company" />
			<view class="subTitle">
				采购规模
			</view>
			<input type="text" class="inputBox" placeholder="请输入年采购规模"
				placeholder-style='font-size: 28rpx;color: #999999;' v-model='user.procurement_scale' />
			<van-checkbox :value="checked" shape="circle" @change="onChange" icon-size='14' checked-color='#3D88FB'>
				<view class="checkBox">
					阅读并同意我们的<text @click.stop="agreement('用户协议')">《用户协议》</text>和<text @click.stop="agreement('隐私政策')">《隐私政策》</text>
				</view>
			</van-checkbox>
		</view>
		<view class="landingBtn" @click="submit">
			留言咨询
		</view>
		<view class="landingCode">
			<image :src="getImgSrc('/uploads/20231225/1703491274658936ca0a9f4bTSTeDrFp31afa6b89ee0f582e1f498f662cd5aa5b79.png')" mode="widthFix" :show-menu-by-longpress='true'></image>
		</view>
		<view class="landingsubTitle">
			现在就有采购需求
			<br />
			直接对接专属客服、销售
		</view>
		<view class="videoTitle">
			演示操作视频
		</view>
		<view class="videoBox">
			<video :src="getImgSrc('/uploads/20231220/17030637536582b0c9bb12aFA产线官网说明.mp4')" controls></video>
		</view>
		<view class="videoTip">
			*产品以官网展示价格为准
		</view>
		<image :src="getImgSrc('/uploads/20231221/17031289166583af542c9cfJzwcsQ12yJMndfda9f5b77e539ce4c5f4df0fe4614c3.jpg')" mode="widthFix"></image>
		<image :src="getImgSrc('/uploads/20231221/17031289166583af5433ffckOpt7nXdVKOR4308d3d536550dedf21d6542e2e6a6e2.jpg')" mode="widthFix"></image>
		<image :src="getImgSrc('/uploads/20231221/17031289166583af54383152tZB0IghulTF1c33da315960b6abd64c0412a8435a75.jpg')" mode="widthFix"></image>
		<image :src="getImgSrc('/uploads/20231221/17031289166583af543839dcb1iJZPkzEb12e698ecb20498b282958448181e02a8c.jpg')" mode="widthFix"></image>
		<view class="bottom1">
			专业运营团队为您的企业匹配采购物料
		</view>
		<view class="bottom2" @click='scroll'>
			立即留言咨询 成为企业尊享会员
		</view>
		<view class="" style="height: 50rpx;">

		</view>
		<van-popup :show="showPopup" z-index='10000' :close-on-click-overlay='false'
			custom-style='background:rgba(0,0,0,0);'>
			<view class="popupBox">
				<image referrerPolicy='no-referrer' :show-menu-by-longpress='true' :src="getImgSrc('/uploads/20231225/1703491274658936ca0a9f4bTSTeDrFp31afa6b89ee0f582e1f498f662cd5aa5b79.png')" mode="widthFix" class="popupImg"></image>
				<image src="https://wx.xtwaixie.com/img/bh.png" class="popupOut" @click="showPopup = false"></image>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import http from '../../utils/http';
	export default {
		data() {
			return {
				showPopup: false,
				checked: false,
				user: {
					name: '',
					phone: '',
					company: '',
					procurement_scale: ''
				},
				pictureList: [
					"/uploads/20240325/17113386076600f46f39afd.jpg",
					"/uploads/20240325/1711354016660130a0c296a.jpg",
					"/uploads/20240325/17113336496600e1116b456.jpg",
					"/uploads/20240325/17113336496600e11169d3a.jpg",
					"/uploads/20240325/17113336496600e1116eb91.jpg",
					"/uploads/20240325/17113320926600dafc2acb5.jpg",
					"/uploads/20240325/17113320926600dafc3932e.jpg",
					"/uploads/20240325/17113320926600dafc35d6e.jpg",
					"/uploads/20240325/17113344746600e44af117a.jpg",
					"/uploads/20240325/17113344746600e44af417b.jpg",
					"/uploads/20240325/17113344756600e44b02e5f.jpg"

				],
				swiperList: [
					'/uploads/20240325/17113320926600dafc1f0c5.jpg',
					"/uploads/20240325/17113320926600dafc2f46e.jpg",
					"/uploads/20240325/17113320926600dafc3016a.jpg",
					"/uploads/20240325/17113320926600dafc30d1c.jpg",
					"/uploads/20240325/17113320926600dafc30d52.jpg",
				]
			};
		},
		onLoad() {
			http.request('demand/getIp', {
					type: 2
				})
				.then((res) => {})
				.catch((res) => {
					console.log(res);
				});
		},
		methods: {
			agreement(i) {
				uni.navigateTo({
					url: "/subPack/agreement/agreement?name=" + i
				})
			},
			submit() {
				if (this.user.name.trim() == '') {
					uni.showToast({
						title: "请输入姓名",
						icon: "none"
					})
					return
				}
				let pattern = /[~!@#$%^&*()_+`\-={}[\]\\|;:'",.<>/?]/g
				if (pattern.test(this.user.name)) {
					uni.showToast({
						title: '姓名不能包含敏感词和特殊字符等',
						icon: 'none',
					})
					return
				}
				let reg = /^1[3456789]\d{9}$/
				let reg2 = /^0\d{2,3}-?\d{7,8}$/
				if (reg.test(this.user.phone) || reg2.test(this.user.phone)) {
					if (this.user.company.trim() == '') {
						uni.showToast({
							title: "请输入公司名称",
							icon: "none"
						})
						return
					}
					if (pattern.test(this.user.company)) {
						uni.showToast({
							title: '公司名称不能包含敏感词和特殊字符等',
							icon: 'none',
						})
						return
					}
					if (this.user.procurement_scale.trim() == '') {
						uni.showToast({
							title: "请输入年采购规模",
							icon: "none"
						})
						return
					}
					if (!this.checked) {
						uni.showToast({
							title: "阅读并同意我们的《用户协议》和《隐私政策》",
							icon: "none"
						})
						return
					}
					http.request('login/consult', this.user)
						.then((res) => {
							if (res.code == 200) {
								this.user = {
									name: '',
									phone: '',
									company: '',
									procurement_scale: ''
								}
								this.showPopup = true
								uni.showToast({
									title: "提交成功",
									icon: "none"
								})
							}

						})
						.catch((res) => {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						});
				} else {
					uni.showToast({
						title: "手机号码格式不正确",
						icon: "none"
					})
				}
			},
			onChange(e) {
				this.checked = e.detail
			},
			scroll() {
				let num = 0
				uni.createSelectorQuery().in(this).select('.landing1').boundingClientRect((rect) => {
					num += rect.height
					uni.createSelectorQuery().in(this).select('.landing2').boundingClientRect((rect) => {
						num += rect.height
						uni.createSelectorQuery().in(this).select('.landingTitle').boundingClientRect((
							rect) => {
							num += rect.height
							uni.createSelectorQuery().in(this).select('.landingBtn')
								.boundingClientRect((rect) => {
									num += rect.height
									uni.createSelectorQuery().in(this).select('.landingHeight')
										.boundingClientRect((rect) => {
											num += rect.height
											uni.pageScrollTo({
												scrollTop: num,
												duration: 300
											})
										}).exec()
								}).exec()
						}).exec()
					}).exec()
				}).exec()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.landing {
		line-height: 1;

		.popupBox {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.popupImg {
			width: 550rpx;
		}

		.popupOut {
			width: 50rpx;
			height: 50rpx;
			margin-top: 100rpx;
		}

		image {
			width: 750rpx;
			height: auto;
			display: block;
		}

		.landingBox {
			width: 690rpx;
			margin: 60rpx auto 60rpx;
			background: #C9DFF2;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			box-sizing: border-box;
			padding: 29rpx 33rpx 37rpx;

			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 0.87);
				margin-bottom: 30rpx;
			}

			.subTitle {
				margin-bottom: 20rpx;
				font-size: 30rpx;
				color: rgba(51, 51, 51, 0.87);
			}

			.inputBox {
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 5rpx 5rpx 5rpx 5rpx;
				margin-bottom: 25rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				font-size: 28rpx !important;

			}

			.checkBox {
				font-size: 24rpx;
				color: #333333;

				text {
					color: #3D88FB;
				}
			}
		}

		.landingTitle {
			padding: 19rpx 0 53rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 0.87);

			text {
				color: #F6081B;
			}
		}

		.landingBtn {
			margin: 60rpx auto;
			width: 630rpx;
			text-align: center;
			line-height: 102rpx;
			background: #FE4346;
			border-radius: 51rpx 51rpx 51rpx 51rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.landingCode {
			display: flex;
			justify-content: center;
			margin: 60rpx 0;

			image {
				width: 550rpx;
			}
		}
		.landingCodeNew{
			display: flex;
			justify-content: center;
			margin: 60rpx 0;
			flex-direction: column;
			align-items: center;
			image {
				width: 250rpx;
				height: auto;
			}
			view{
				font-size: 32rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 0.87);
				line-height: 2;
				text-align: center;
			}
		}
		.landingsubTitle {
			font-size: 32rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 0.87);
			line-height: 1.5;
			text-align: center;
			margin-bottom: 58rpx;
		}

		.videoTitle {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 0.87);
			margin-bottom: 36rpx;
		}

		.videoBox {
			display: flex;
			justify-content: center;
			margin-bottom: 28rpx;

			video {
				width: 690rpx;
				height: 332rpx;
			}
		}

		.videoTip {
			text-align: center;
			font-size: 24rpx;
			color: red;
		}

		.bottom1 {
			width: 695rpx;
			line-height: 102rpx;
			background: #FFDAB4;
			border-radius: 51rpx 51rpx 51rpx 51rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #2D2D2F;
			text-align: center;
			margin: 44rpx auto 40rpx;
		}

		.bottom2 {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			width: 695rpx;
			line-height: 102rpx;
			background: #FE4346;
			text-align: center;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
</style>